<template>
	<custom-page title="账单" backgroundColor="#F9F9F9">
		<template #page>
			<view class="page-content">
				<top-tab-bar-news minWidth="16%" :tabs="tabDatas" :current="current" @changed="onTabItemChange($event)"></top-tab-bar-news>
				<common-list-view class="list-view" :enableLoadMore="true" :enableRefresh="true"
					@listinit="incomeRecordList($event)" :hasNoDataHolder="true" v-if="current==0">
					<template #content='{datas}'>
						<view class="order-item" v-for="(item, index) in datas" @click="orderClick(item)">
							<view class="content-row">
								<image class="icon" :src="asserts.ic_bill_income"></image>
								<view class="center-view">
									<view class="title">
										<view>订单收益</view>
									</view>
									<view class="time">{{item.createTime}}</view>
								</view>
								<view class="money">{{item.price}}</view>
							</view>
							<view class="divider"></view>
						</view>
					</template>
				</common-list-view>
				<common-list-view class="list-view" :enableLoadMore="true" :enableRefresh="true"
					@listinit="withdrawApplyRecord($event)" :hasNoDataHolder="true" v-if="current==1">
					<template #content='{datas}'>
						<view class="order-item" v-for="(item, index) in datas" @click="orderClick(item)">
							<view class="content-row">
								<image class="icon" :src="asserts.ic_bill_income"></image>
								<view class="center-view">
									<view class="title">
										<view>订单收益</view>
									</view>
									<view class="time">{{item.createTime}}</view>
								</view>
								<view class="money">{{item.price}}</view>
							</view>
							<view class="divider"></view>
						</view>
					</template>
				</common-list-view>
			</view>
		</template>
	</custom-page>
</template>

<script>
	export default {
		data() {
			return {
				tabDatas: [
					{
						text: '入账记录'
					},
					{
						text: '提现记录'
					}
				],
				current: 0,
			}
		},
		methods: {
			//tab切换
			onTabItemChange: function(event) {
				this.current = event.value
			},
			
			//获取记录
			incomeRecordList(event){
				event.target.loadPageData = ({start, pageSize, showLoading = false}) => {
					let params = {
						current: start,
						pageSize: pageSize,
					}
					return this.requestCenter.incomeRecordList(params)
					.then(res => {
						return Promise.resolve({ 
							curPage: start,
							pageCount: res.pages || 1,
							datas: res.records || []
						})
					})
				}
			},
			
			withdrawApplyRecord(event){
				event.target.loadPageData = ({start, pageSize, showLoading = false}) => {
					let params = {
						current: start,
						pageSize: pageSize,
					}
					return this.requestCenter.withdrawApplyRecord(params)
					.then(res => {
						return Promise.resolve({ 
							curPage: start,
							pageCount: res.pages || 1,
							datas: res.records || []
						})
					})
				}
			},
			
			//账单点击
			orderClick(item){
				uni.navigateTo({
					url: '/pages/mine-wallet-bill-detail/mine-wallet-bill-detail?id' + item.id
				})
			}
			
		}
	}
</script>

<style scoped lang="less">
	.page-content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.list-view{
		flex: 1;
		overflow: hidden;
	}
	.order-item{
		display: flex;
		flex-direction: column;
		padding: 32rpx 32rpx 0 32rpx;
		box-sizing: border-box;
		background-color: white;
		.content-row{
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.icon{
			width: 80rpx;
			height: 80rpx;
			margin-right: 22rpx;
		}
		.center-view{
			flex: 1;
			display: flex;
			flex-direction: column;
			.title{
				font-size: 28rpx;
				line-height: 40rpx;
				color: #021624;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.withdraw-in,
			.withdraw-arrive{
				width: 96rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 4rpx;
				font-size: 22rpx;
				text-align: center;
				margin-left: 8rpx;
				background: #FFFFFF;
			}
			.withdraw-in{
				border: 2rpx solid #FF6A3C;
				color: #FF6A3C;
			}
			.withdraw-arrive{
				border: 1rpx solid #ABAFB7;
				color: #ABAFB7;
			}
			.time{
				color: #ABAFB7;
				font-size: 28rpx;
				line-height: 32rpx;
				margin-top: 8rpx;
			}
		}
		.money{
			font-size: 32rpx;
			line-height: 32rpx;
			color: #021624;
			font-weight: 500;
		}
		.divider{
			width: 100%;
			height: 1rpx;
			background-color: #F5F5F5;
			margin-top: 32rpx;
		}
	}
</style>
